/**
 * Created by JUNYI on 2017-04-01.
 */
function init() {
    // base maps
    var street = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            id: 'map',
            attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
        }),
        geohey = L.tileLayer('http://geohey.com/s/mapping/dark/all?z={z}&x={x}&y={y}&ak=OWJiZTM4NTEwNGQ4NGE0ZWI5NjdmYzZkZDk0OWZmM2M', {
            id: 'map',
            attribution: 'GeoHey &copy; contributors'
        });
    var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [street, geohey]
    });
    // overlay layers
    var littleton = L.marker([39.61, -105.02]).bindPopup('This is littleton, CO.'),
        denver = L.marker([39.74, -104.99]).bindPopup('This is denver, CO.'),
        aurora = L.marker([39.73, -104.8]).bindPopup('This is aurora, CO.'),
        golden = L.marker([39.77, -105.23]).bindPopup('This is golden, CO.');
    var cities = L.layerGroup([littleton, denver, aurora, golden]);
    // create simple objects
    var baseMaps = {
        "Street": street,
        "<span style='color: gray'>GeoHey</span>": geohey
    };
    var overlayMaps = {
        "Cities": cities
    };
    // create layer control
    L.control.layers(baseMaps, overlayMaps).addTo(map);
}